<template>
  <div class="news">
    <div class="banner">
      <img :src="ban1" alt="">
    </div>
    <div class="news-box container">
      <router-link :to="{name:'newsDetail',query:{newid:item.id}}" class="list" v-for="item in newslist" :key="item.id">
        <div class="img">
          <img :src="comimgsrc+item.preview">
        </div>
        <div class="right">
          <div class="name">{{item.title}}</div>
          <p class="time">{{item.create_time}}</p>
          <div class="txt">{{item.abstract}}</div>
          <div class="btn">了解更多</div>
        </div>
      </router-link>
      <compage v-bind:newslength="newslist.length"></compage>
    </div>
    
  </div>
</template>

<script>
import ban1 from '@/assets/image/ban1.jpg';
import cp1 from '@/assets/image/cp1.jpg';
import compage from '@/components/common/compage';
export default {
  name: 'App',
  data(){
    return{
      ban1,cp1,
      comimgsrc:'http://api.mountainfreshes.com',
      newslist:[]
    }
  },
  methods:{
    
  },
  components:{
    compage
  },
  created(){
    this.$http.get("/index.php/index/article/getArticleList")
      .then(res => {
        console.log(res)
        this.newslist=res.data
        this.newslength = res.data.length
      })
      .catch(error => {
        
      });
  }
}
</script>

<style scoped lang="less">
.news{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .banner{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    img{
      width: 100%;
    }
  }
  .news-box{
    margin: 44px auto 0;
    .list{
      display: block;
      width: 100%;
      height: 190px;
      margin-top: 22px;
      &:hover{
        .img{
          img{
            filter:blur(1px);
            -webkit-filter:blur(1px);
            -moz-filter:blur(1px);
            -ms-filter:blur(1px);
            -o-filter:blur(1px);
          }
        }
        .right{
          .name{
            color: #5bb756;
          }
          .btn{
            background: #2b7e27;
          }
        }
      }
      .img{
        width: 260px;
        height: 100%;
        float: left;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        width: 910px;
        float: right;
        height: 100%;
        .name{
          width: 100%;
          height: 30px;
          font-size: 16px;
          color: #1b1b1b;
          line-height: 30px;
          overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
        }
        .time{
          font-size: 14px;
          color: #6b6b6b;
        }
        .txt{
          width: 100%;
          height: 78px;
          line-height: 26px;
          font-size: 14px;
          color: #1b1b1b;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:3;
          margin-top: 10px;
        }
        .btn{
          width: 138px;
          height: 38px;
          background: #5bb756;
          color: #fff;
          text-align: center;
          line-height: 38px;
          font-size: 14px;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
